<template>
  <div class="siderbar">
    <div class="login-menu">
      <div class="logo">
        <img src="@/assets/img/logo_thine.jpg" width="60" alt="">
      </div>
    </div>
    <ul class="list">
      <li @click="setActive(0)" :class="{ 'list-item': true, 'action': LOCAL.MAIN_ACTION_INDEX == 0 }">
        <a href="#">
          <i class='bx bx-grid-alt'></i>
        </a>
      </li>
      <li @click="setActive(1)" :class="{ 'list-item': true, 'action': LOCAL.MAIN_ACTION_INDEX == 1 }">
        <a href="#">
          <i class='bx bx-upload'></i>
        </a>
      </li>
      <li @click="setActive(2)" :class="{ 'list-item': true, 'action': LOCAL.MAIN_ACTION_INDEX == 2 }">
        <a href="#">
          <i class='bx bxl-meta'></i>
        </a>
      </li>
      <li @click="setActive(3)" :class="{ 'list-item': true, 'action': LOCAL.MAIN_ACTION_INDEX == 3 }">
        <a href="#">
          <i class='bx bx-user'></i>
        </a>
      </li>
    </ul>
  </div>
</template>
<style>
.siderbar {
  left: 0;
  width: 70px;
  padding: 20px;
  height: 100%;
  /* transform: translateY(-16.3%); */
  background-color: white;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  transition: 0.5s;
}



.siderbar .login-menu {
  display: flex;
  justify-items: center;
  width: 100%;
  height: 70px;
  justify-content: center;
  align-items: center;

}

.siderbar .login-menu .logo {
  color: #fff;
  pointer-events: none;
  transition: .3s;
}



.siderbar .list {
  position: relative;
  display: inline;
  width: 100%;

}

.list .list-item {
  list-style: none;
  text-align: center;
  width: 100%;
  line-height: 20px;
  margin-bottom: 30px;

}

.list .list-item a {
  display: flex;
  text-align: center;
  padding: 20px;
  justify-content: center;
  font-size: 30px;
  color: #E7E7E7;
  border-radius: 50px;

  text-decoration: none;
  transition: 0.5s;
}

.list .list-item a:hover {
  background-color: #F1F1F1;
  color: #0B84FF;
}

.list-item.action a {
  color: #0B84FF;
  background-color: #F1F1F1;

}
</style>
<script>
import LOCAL from '@/main'
export default {
  data() {
    return {
      LOCAL,
    }
  },
  methods: {
    setActive(data) {
      LOCAL.MAIN_ACTION_INDEX = data;
      if (LOCAL.MAIN_ACTION_LIST[data] != this.$route.name) {
        this.$router.push({ path: LOCAL.MAIN_ACTION_LIST[data] });
      }
    }
  }
}


</script>
